{% extends 'base.html' %}
{% load static %}
{% load comment_tags %}

{# 页面标题 #}
{% block title %}良言{% endblock %}
{% block header_extends %} <link rel="stylesheet" href="{% static 'blog/blog.css' %}"> {% endblock %}

{# 页面内容 #}
{% block nav_blog_active %}active{% endblock %}

{% block content %}
    <div class="info-header">
        <div class="container">
            <h1 class="info-content" id="info_header_h1">博客列表</h1>
            <h3>探索你喜欢的文章</h3>
        </div>
    </div>

    <div class="container" id="blog_list_container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        {% block blog_list_title %}博客列表{% endblock %}
                    </div>
                    <div class="panel-body">
                        {% for blog in page_of_blogs.object_list %}
                            <div class="blog">
                                <h3><a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a></h3>
                                <p class="blog-info">
                                    <span class="glyphicon glyphicon-tag"></span>
                                    <span class="blog-list-info-detail">
                                        <a id="list_type_btn" href="{% url 'blogs_with_type' blog.blog_type.pk %}" class="btn btn-success btn-xs">
                                            {{ blog.blog_type }}
                                        </a>
                                    </span>
                                    <span class="glyphicon glyphicon-time"></span>
                                    <span class="blog-list-info-detail">
                                        {{ blog.create_time|date:"Y-m-d G:i" }}
                                    </span>
                                    <span class="blog-list-info-detail">阅读：{{ blog.get_read_num }}</span>
                                    <span class="blog-list-info-detail">评论：{% get_comment_num blog %}</span>
                                </p>
                                {# striptags是去掉html标签 #}
                                <p>{{ blog.content|striptags|truncatechars:120 }}</p>
                            </div>
                        {% empty %}
                            <div class="blog"><h3>暂无博客，敬请期待</h3></div>
                        {% endfor %}
                    </div>
                </div>
                <div class="paginator">
                    <ul class="pagination">
                        {# 上一页 #}
                        {% if page_of_blogs.has_previous %}
                            <li>
                                <a href="?page={{ page_of_blogs.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="disabled">
                                <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% endif %}

                        {# 页码部分 #}
                        {% for page_num in page_range %}
                            {% if page_num == page_of_blogs.number %}
                                <li class="active"><span>{{ page_num }}</span></li>
                            {% elif page_num == '...' %}
                                <li><span>{{ page_num }}</span></li>
                            {% else %}
                                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                            {% endif %}
                        {% endfor %}

                        {# 下一页 #}
                        {% if page_of_blogs.has_next %}
                            <li>
                            <a href="?page={{ page_of_blogs.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            </a>
                            </li>
                        {% else %}
                            <li class="disabled">
                            <a href="#">
                            <span aria-hidden="true">&raquo;</span>
                            </a>
                            </li>
                        {% endif %}
                    </ul>
                    <p>
                        共有{{ page_of_blogs.paginator.count }}篇博客，
                        当前第{{ page_of_blogs.number }}页，共有{{ page_of_blogs.paginator.num_pages}}页
                    </p>
                </div>
            </div>

            <div class="hidden-xs col-sm-4 col-md-3 col-lg-2">
                <div class="panel panel-default">
                    <div class="panel-heading">博客分类</div>
                    <div class="panel-body">
                        <ul class="blog-types">
                            {% for blog_type in blog_types %}
                                <li><a href="{% url 'blogs_with_type' blog_type.pk %}">
                                    {{ blog_type.type_name }}({{ blog_type.blog_count }})
                                </a></li>
                            {% empty %}
                                <li>暂无分类</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">日期归档</div>
                    <div class="panel-body">
                        <ul>
                            {% for blog_date, blog_count in blog_dates.items %}
                                <li>
                                    <a href="{% url 'blogs_with_date' blog_date.year blog_date.month %}">
                                        {{ blog_date|date:"Y年m月" }}({{ blog_count }})
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
